<template>
  <div class="exchangeRate">
    <assets-head :title="$t('汇率设置')" />
    <div v-for="(item,index) in exchangeratelist_get_data" :key="index"
      class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35 "
      @click="handleSetLang(item)">
      <div class="lang-title flex items-center font-26 textColor">
        <img class="w-55 h-55 mr-24" :src="item.image" alt="">
        {{item.currency}}
      </div>

      <img class="w-40 h-40 lh-40" v-if="item.currency==show_ex" src="../../assets/image/public/checked.png" />
    </div>
  </div>
</template>
<script>
import AxiosexchangeRate from "@/API/exchangeRate";
import assetsHead from "@/components/assets-head";
import {mapActions} from "vuex";
import {SET_CURRENCY} from "@/store/const.store";

export default {
  data() {
    return {
      show_ex: {},
      list:[
        {title:'USD',key: 'USD'},
        {title: 'CNY',key: 'CNY'},
        {title: 'ERU',key: 'ERU'},
        {title: 'JPY',key: 'JPY'}
      ],
      exchangeratelist_get_data:[]
    }
  },
  components: {
    assetsHead
  },
  mounted() {
    this.init()
  },
  methods:{
    ...mapActions('home',[SET_CURRENCY]),
    init(){
      this.show_ex = this.$store.state.home.currency.currency
      this.exchangeratelist_get()
    },
    exchangeratelist_get(){
      const t = this
      AxiosexchangeRate.exchangeratelist({}).then((res)=>{
        console.log(res.data)
        t.exchangeratelist_get_data = res.data
        t.exchangeratelist_get_data.forEach((item)=>{
          item.image = require('../../assets/image/exchange-rate/'+item.currency+'.png')
        })
      })
    },
    handleSetLang(e) {
      // console.log(t.$store.state.exchangeRate.exchangeRate)
      const t = this
      AxiosexchangeRate.exchangerateuserconfig({rateId:e.id}).then((res)=>{
        if (res.code==0){
          // t.$store.commit('setExchangeRate',e)
          this.SET_CURRENCY()
          t.show_ex = e.currency
        }

      })

    },
    onClickLeft() {
      this.$router.go(-1)
      console.log(this.$i18n.locale)
    },
  }
}
</script>
<style lang="scss" scoped>
.exchangeRate{
  width: 100%;
  box-sizing: border-box;
}
.lang-padding{
  border-bottom: 1px solid $line_color;
  font-weight: 400;
  color: #000000;
}
</style>
